<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .countdown {
        width: 240px;
        height: 305px;
        text-align: center;
        line-height: 1;
        color: #fff;
        background-color: brown;
        /* background-size: 240px; */
        /* float: left; */
        overflow: hidden;
      }

      .countdown .next {
        font-size: 16px;
        margin: 25px 0 14px;
      }

      .countdown .title {
        font-size: 33px;
      }

      .countdown .tips {
        margin-top: 80px;
        font-size: 23px;
      }

      .countdown small {
        font-size: 17px;
      }

      .countdown .clock {
        width: 142px;
        margin: 18px auto 0;
        overflow: hidden;
      }

      .countdown .clock span,
      .countdown .clock i {
        display: block;
        text-align: center;
        line-height: 34px;
        font-size: 23px;
        float: left;
      }

      .countdown .clock span {
        width: 34px;
        height: 34px;
        border-radius: 2px;
        background-color: #303430;
      }

      .countdown .clock i {
        width: 20px;
        font-style: normal;
      }
    </style>
  </head>

  <body>
    <div class="countdown">
      <p class="next">今天是2222年2月22日</p>
      <p class="title">下班倒计时</p>
      <p class="clock">
        <span id="hour">00</span>
        <i>:</i>
        <span id="minutes">25</span>
        <i>:</i>
        <span id="scond">20</span>
      </p>
      <p class="tips">18:30:00下课</p>
    </div>
    <script>
      function getRandomColor(flag = true) {
        if (flag) {
          let str = "#";
          let arr = [
            "0",
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "a",
            "b",
            "c",
            "d",
            "e",
            "f",
          ]
          for (let i = 0; i <= 6; i++) {
            let random = Math.floor(Math.random() * arr.length);
            str += arr[random];
          }
          return str;
        } else {
          let r = Math.floor(Math.random() * 256);
          let g = Math.floor(Math.random() * 256);
          let b = Math.floor(Math.random() * 256);
          return `rgb(${r},${g},${b})`;
        }
      }
      // 给盒子添加随机背景色
      const countdown = document.querySelector(".countdown");
      countdown.style.backgroundColor = getRandomColor();

      // 函数封装 getCountTim
      function getCountTime() {
        // 获取当前时间
        const now = +new Date();
        // 获取将来的时间
        const last = +new Date("2024-9-9 18:40:00");
        // 得到剩余时间戳
        const time = (last - now) / 1000;
        // 转换时/分/秒
        let d = parseInt(time / 60 / 60 / 24);
        let h = parseInt((time / 60 / 60) % 24);
        h = h < 10 ? "0" + h : h;
        let m = parseInt((time / 60) % 60);
        m = m < 10 ? "0" + m : m;
        let s = parseInt(time % 60);
        s = s < 10 ? "0" + s : s;
        // 把时/分/秒放到对应盒子
        document.querySelector("#hour").innerHTML = h;
        document.querySelector("#minutes").innerHTML = m;
        document.querySelector("#scond").innerHTML = s;
      }
      // 先调用一次
      getCountTime();
      // 每隔一秒调用一次
      setInterval(getCountTime, 1000);
    </script>
  </body>
</html>
